<html>
	<head>
		<title> New Document </title>
		<meta name="author" content="stev" />
		<meta http-equiv="content-script-type" content="text/javascript">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<style media="screen">
			body {
				font-family: Verdana, Geneva, sans-serif;
				font-size: 14px;
			}
		
			.tab-box {
				width: 500px;
				margin: 30px auto;
			}
		
			.tab-box ul {
				list-style-type: none;
			}
		
			.tab-box li {
				float: left;
				width: 100px;
				background: #ccc;
				color: #09F;
				height: 30px;
				line-height: 30px;
				text-align: center;
				cursor: pointer;
				margin-right: 3px;
				font-weight: bold;
			}
		
			.tab-box li.active {
				background: #999;
				color: #F0F;
			}
		
			.tab-content {
				padding-left: 40px;
			}
		
			.tab-content div {
				width: 400px;
				height: 500px;
				padding: 15px 5px;
				color: #000;
				clear: left;
				display: none;
				background: #999;
			}
		
			/*//注意这里设置整个容器里的div为不可见的*/
		
			.tab-box div.active-txt {
				display: block;
			}
		
			/*//注意这里设置只有具有tabCont的div内容才可见*/
		</style>
	</head>
	<body>
		<div class="main-tab">
			<div class="tab-box">
				<ul>
					<li class="active">科技</li>
					<li>新闻</li>
					<li>体育</li>
					<li>财经</li>
				</ul>
				<div class="tab-content">
					<div class="active-txt">
						<textarea>sdfasfdasdfasdfas</textarea>
					</div>
					<div>
						东距丰高公路约0.6km，北距丰城水泥厂2.8km
					</div>
					<div>
						要追溯到2002-03赛季。
					</div>
					<div>
						人民币贬值对手机厂商利润的伤害普遍存在。
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		$(function() {
			$(".tab-box li").each(function(index) {
				$(this).mouseover(function() {
					$("li.active").removeClass("active"); //注意这里
					$(this).addClass("active"); //注意这里
					$(".tab-content div.active-txt").removeClass("active-txt");
					$(".tab-content div").eq(index).addClass("active-txt");
				});
			})
		});
	</script>
